<template>
    <div>

    <el-row>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>系统管理</el-breadcrumb-item>
        <el-breadcrumb-item>角色管理</el-breadcrumb-item>

      </el-breadcrumb>
    </el-row>
      <el-row>
        <el-form label-width="80px">
          <el-row gutter="10px">
              <el-col span="8">
                <el-form-item label="角色名称">
                  <el-input v-model="query.roleName" />
                </el-form-item>

              </el-col>
            <el-col span="8">
              <el-form-item label="是否启用">
                <el-select v-model="query.isUsed">
                   <el-option  value="1" label="是"/>
                  <el-option  value="0" label="否"/>
                </el-select>
              </el-form-item>

            </el-col>
            <el-col span="8">
              <el-form-item >
                <el-button  type="success">搜索</el-button>
              </el-form-item>

            </el-col>

          </el-row>

        </el-form>
      </el-row>
      <el-row>
        <el-button-group>
          <el-button type="success" icon="el-icon-edit" @click="btnAddClick">添加</el-button>
          <el-button type="primary" icon="el-icon-share">修改</el-button>
          <el-button type="danger" icon="el-icon-delete">删除</el-button>
        </el-button-group>
       <el-table :data="roles" @row-click="rowClick"  ref="refRoles"  
        @selection-change = "slectionChange"    highlight-current-row border
        style="width: 100%">
        <el-table-column type="selection" width="55"/>
        <el-table-column
          prop="role_name"
          label="日期"
          width="180">
        </el-table-column>
        <el-table-column label="是否启用">
                 <template slot-scope="scope">
                     {{scope.row.is_used|toUsed}}
                 </template> 

        </el-table-column>
        <el-table-column label="操作">
             <template slot-scope="scope">
                 <el-button type="warning" @click="btnEdit(scope.row)">修改</el-button>
                  <el-button type="danger" @click="btnRemove(scope.row)">删除</el-button>
             </template>

        </el-table-column>
      </el-table>
<div class="block">
  <el-pagination
    layout="prev, pager, next"
    :total="50">
  </el-pagination>
</div>
      </el-row>



      <el-dialog
        title="添加角色"
        :visible.sync="dialogVisible"
        width="30%"
        >
        <el-form label-width="80px">
            <el-form-item  label="角色名称">
                <el-input v-model="info.role_name"/>
            </el-form-item>
        </el-form>
        <el-form label-width="80px">
          <el-form-item  label="是否启用">
            <el-switch
              v-model="info.is_used"
              active-color="#13ce66"
              inactive-color="#ff4949">
            </el-switch>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="btnSaveClick">确 定</el-button>
  </span>
      </el-dialog>


      <el-dialog
        title="修改角色"
        :visible.sync="dialogVisibleForEdit"
        width="30%"
        >
        <el-form label-width="80px">
            <el-form-item  label="角色名称">
                <el-input v-model="info.role_name"/>
            </el-form-item>
        </el-form>
        <el-form label-width="80px">
          <el-form-item  label="是否启用">
            <el-switch
              v-model="info.is_used"
              active-color="#13ce66"
              inactive-color="#ff4949">
            </el-switch>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="btnEditSaveClick">确 定</el-button>
  </span>
      </el-dialog>
    </div>

</template>

<script>
export default {
  name: "Role",
  data: function() {
    return {
      query: {
        roleName: "",
        isUsed: ""
      },
      dialogVisible: false,
      dialogVisibleForEdit: false,
      info: {
        role_Name: "",
        is_used: true
      },
      roles: [],
      selection: {}
    };
  },
  mounted() {
    this.initTable();
  },
  methods: {
    initTable() {
      var _this = this;
      this.axios({
        url: "http://localhost:3000/role/list",
        method: "get",
        dataType: "json"
      }).then(function(res) {
        _this.roles = res.data;
      });
    },
    btnAddClick() {
      this.dialogVisible = true;
    },
    btnSaveClick() {
      /*   alert(this.info.roleName);
             alert(this.info.isUsed);*/

      var _this = this;
      this.axios({
        url: "http://localhost:3000/role/add",
        method: "post",
        data: _this.info,
        dataType: "json"
      }).then(function(res) {
        if (res.data.flag) {
          _this.initTable();
          _this.dialogVisible = false;
        } else {
          alert("添加失败！");
        }
      });
    },
    rowClick(row, column, event) {
      this.$refs.refRoles.clearSelection();
      this.$refs.refRoles.toggleRowSelection(row);

      this.info = row;
      if (row.is_used == 1) {
        this.info.is_used = true;
      }

      // this.dialogVisible = true;
    },
    btnEdit(row) {
      this.info.role_id = row.role_id;
      this.info.role_name = row.role_name;
      this.info.is_used = row.is_used;

      this.dialogVisibleForEdit = true;
    },
    btnEditSaveClick(role_id) {
      var _this = this;

      this.axios({
        url: "http://localhost:3000/role/edit",
        method: "post",
        data: _this.info,
        dataType: "json"
      }).then(function(res) {
        if (res.data.flag) {
          _this.initTable();
          _this.dialogVisibleForEdit = false;
        } else {
          alert("修改失败");
        }
      });
    },
    btnRemove(row) {
       let _this=this;

      this.$confirm("确定要删除当前数据吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.axios({
          url: "http://localhost:3000/role/remove",
          method: "post",
          data:{
            role_id:row.role_id
          },
          dataType: "json"
        }).then(function(res) {
          if (res.data.flag) {
            _this.initTable();
          } else {
            alert("删除失败");
          }
        });
      });
    }
  },
  filters: {
    toUsed(val) {
      if (val == "1") {
        return "是";
      } else {
        return "否";
      }
    }
  }
};
</script>

<style scoped>
.el-row {
  margin-top: 20px;
}
</style>
